<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="author" content="Le Duc Cuong" />
	<title>Test alert</title>
    <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
</head>
<style>
    img{border: none;}
    .bg_alert{ width:270px; height:115px; background:url(img/bg_alert.png) no-repeat top left; margin:0px auto; padding:15px 0px 0px 83px; color:#000;}
    .m35l{ margin-left:35px;}
</style>
<script type="text/javascript">
	$(document).ready(function(){
	
    send_contact=function(){
		if($('#name').val() == ""){
			$('#alert').html('Please enter name');
            $('#backoverlay').show();
			$('#show_popup').show();
			$('#f_focus').html('name');
			return false;	
		}
		if($('#email').val() == ""){
			$('#alert').html('Please enter email');
			$('#backoverlay').show();
			$('#show_popup').show();
			$('#f_focus').html('email');
			return false;	
		}
        else{
			if(!isEmail($('#email').val())){
				$('#alert').html('Please enter email correct');
				$('#backoverlay').show();
				$('#show_popup').show();
				$('#f_focus').html('email');
				return false;	
			}
		}
	};
    
    isEmail=function(string) {
		if (string.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
			return true;
		else return false;
    };
    
    close_popup=function(){		
		var fel=$('#f_focus').html();
        $('#backoverlay').hide();
		$('#show_popup').hide();
		$('#' + fel ).focus();
	};
    
    });

</script>

<body>
<!--Popup-->
<div class="bg_alert" id="show_popup" style="display:none; position: fixed; top: 35%; left: 50%; z-index:10001; margin-left:-140px;">
	<span id="f_focus" style="display:none;"></span>
	<div style="margin:0; padding-top:10px; min-height:60px;" id="alert"></div>
	<div style="padding-left: 40px;"><a href="javascript:void(0);" onclick="close_popup();"><img src="img/bt_luk1.png" alt="" /></a><a href="javascript:void(0);" onclick="close_popup();"><img src="img/bt_luk1.png" alt="" /></a></div>
</div>
<!--End Popup-->
<!--Need-->
<div style="display: none;position: fixed; top: 0;left: 0;width: 100%;height: 100%;background-color: #000000;z-index:10000;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);" id="backoverlay"></div>
<!--End-->

<div style="margin: 0 auto; width: 960px;">
<form name="frm" id="frm" action="#" method="post">

    <input type="text" name="name" id="name" /><br />
    
    <input type="text" name="email" id="email" /><br />
    
    <input type="button" onclick="send_contact();" value="Send" />
</form>
</div>
</body>
</html>